<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>信息列表</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../layui/layui.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<link href="../layui/css/layui.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/recover.css" />
	</head>
	<body>
		<div id="app">
			<div id="listbox">
				<!--消息列表-->
				<div class="listuser" v-for="inform in informList">
					<img class="user" :src="inform.buserinfo.headImg" width="60px" height="60px"/>
					<div class="messagetitle"><strong>{{inform.buserinfo.userName}}</strong>&nbsp;&nbsp;<span class="titlespan"><a href="#">{{inform.releasetable.userId==inform.uid?"对你的视频发表了评论":"回复了我的评论"}}</a></span>
					<div class="titlespan" style="color: white;margin-top: 6px;">{{inform.informContent}}</div>
					<div class="titletime">{{inform.informTime}}
					<span>&nbsp; 
					<i class="layui-icon layui-icon-reply-fill" style="font-size: 12px; color:#cccccf;" :onclick="'showRequest('+inform.id+')'">回复</i>  &nbsp;
					<i class="layui-icon layui-icon-praise" :onclick="'praiseComment('+inform.commentId+')'" style="font-size: 12px; color:#cccccf;">点赞</i></span>
					</div>
					</div>
					<div class="content">
						<label v-if="inform.releasetable!=null"><img :src="inform.releasetable.worksCover"/></label>
						<label v-if="inform.commenttable!=null">{{inform.commenttable.commentContent}}</label>
					</div>
					<div class="recover" :id="'recover'+inform.id" style="display: none;">
						<img class="recoveruser" :src="inform.userinfo.headImg" width="60px" height="60px"/>
						<textarea placeholder="请自觉遵守互联网相关政策,严禁发布色情,暴力,反动的言论" class="recoverinput"></textarea>
						<button class="sendreview" @click="sendCommenttable(inform)">发表评论</button>
					</div>
					
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				informList:[],
			},methods:{
				sendCommenttable(inform){
					inform.informContent=document.querySelector("#recover"+inform.id+" textarea").value
					console.log(inform.commentId)
					axios.post(API+'requestInform',inform).then(response => {
						if(response.data=="发送成功！"){
							this.$message({
								  message: response.data,
								  type: 'success'
							});
							document.querySelector("#recover"+inform.id+" textarea").value="";
						}else{
							this.$message.error(response.data);
						}
					}).catch(error => {
						console.error(error);
					});
				}
			},
			mounted() {
				var uid=localStorage.getItem("userid")
				axios.get(API+'getInform?uid='+uid+"&informType="+1).then(response => {
					this.informList=response.data
					console.log(response.data)
				}).catch(error => {
					console.error(error);
				});
			}
		})
	</script>
	<script type="text/javascript">
		function showRequest(id){
			//展示回复框
			var box=document.getElementById("recover"+id);
			if(box.getAttribute("style","display")=="display: none;"){
				box.style.display="block";
			}else{
				box.style.display="none";
			}
		}
		
		function praiseComment(commentId){
			var userid=localStorage.getItem("userid")
			console.log(event.target.style.color)
			if(event.target.style.color=="rgb(204, 204, 207)"){
				event.target.style.color="pink"
				axios.get(API+'upvoteComment?cid='+commentId+"&userid="+userid).then(response => {
					
				}).catch(error => {
					console.error(error);
				});
			}else{
				event.target.style.color="rgb(204, 204, 207)"
				axios.get(API+'cancelUpvoteComment?cid='+commentId+"&userid="+userid).then(response => {
					alert(response.data)
				}).catch(error => {
					console.error(error);
				});
			}
			
		}
	</script>
</html>
